<template>
  <div>
    <h1>Hello World</h1>
    <div class="position-demo"></div>
  </div>
</template>

<script>
export default {
  name: 'CozeWebChatComponent',
  mounted() {
    // 动态加载外部的JavaScript文件
    const script = document.createElement('script');
    script.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.1.0-beta.0/libs/cn/index.js';
    script.onload = () => {
      // 确保CozeWebSDK.WebChatClient已经加载
      if (window.CozeWebSDK && window.CozeWebSDK.WebChatClient) {
        // 初始化CozeWebSDK.WebChatClient
        const cozeWebSDK = new window.CozeWebSDK.WebChatClient({
          config: {
            // 智能体 ID
            botId: '7472198173591945257',
          },
          auth: {
            // 鉴权方式
            type: 'token',
            // PAT或OAuth访问密钥
            token: 'pat_xLgDaGglSFwIAp35mOsKqZjjaQTl7PCMkH8ZabGkPLB9hdQrosFqi0Vg0pM8uyOv',
            // 访问密钥过期时，使用的新密钥
            onRefreshToken: () => 'pat_xLgDaGglSFwIAp35mOsKqZjjaQTl7PCMkH8ZabGkPLB9hdQrosFqi0Vg0pM8uyOv',
          },
          ui: {
              chatBot: {
                title: "智采精灵-AI客服",
                uploadable: true
              },
              base: {
              icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
              layout: 'pc',
              zIndex: 1000,
              }
          },
          userInfo: {
              id: 'liwenming',
              url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
              nickname: '李文明',
          },
        });

        // 调用CozeWebSDK.WebChatClient的渲染方法
        cozeWebSDK.render({
          el: '#position_demo',
        });
      }
    };
    script.onerror = () => {
      console.error('Error loading the CozeWebSDK');
    };
    document.head.appendChild(script);
  }
}
</script>

<style scoped>
.position-demo {
  position: absolute;
  right: 10px;
  bottom: 20px;
}
</style>